<template>
  <div class="fontWhiteColor">
    <ul class="ActionItems-wapper">
      <li>
        <el-popover placement="bottom" trigger="click" class="minwidth">
          <span class="iconfont icon-pifu actinitem" slot="reference"></span>
          <ThemeContent> </ThemeContent>
        </el-popover>
      </li>
      <!-- <li>
        <el-popover placement="bottom" trigger="click" content="消息通知">
          <el-badge :value="1" class="item" type="primary" slot="reference">
            <span class="iconfont icon-lingdang-xianxing actinitem"></span>
          </el-badge>
          <MessageContent> </MessageContent>
        </el-popover>
      </li> -->
      <li>
        <el-tooltip class="item" :content="fullscreenFlag ? '全屏' : '退出全屏'" effect="light" placement="bottom">
          <span class="iconfont actinitem" :class="[fullscreenFlag ? 'icon-quanping' : 'icon-tuichuquanping']"
            @click="Fullscreen">
          </span>
        </el-tooltip>
      </li>
      <!-- <li>
        <el-tooltip class="item" content="档案车" effect="light" placement="bottom">
          <span class="iconfont icon-gouwuche actinitem"></span>
        </el-tooltip>
      </li> -->
      <li v-show="setAndHistory.length > 0">
        <!-- <el-tooltip class="item" :content="item.name" effect="light"
          placement="bottom">
          <span :class="item.icon" class="iconfont  actinitem"></span>
        </el-tooltip> -->
        <el-dropdown trigger="click" @command="handleCommand">
          <i class="iconfont icon-shezhi actinitem"></i>
          <template #dropdown>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="x in setAndHistory[0]?.children || []" :key="x.id" :command="x">
                <span :class="x.icon" class="iconfont" style="margin: 0 5px 0 0"> </span>{{ x.name }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
    </ul>
  </div>
</template>

<script>
import ThemeContent from './ThemeContent.vue'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'ActionItems',
  components: { ThemeContent },
  data() {
    return {
      state: '',
    }
  },

  mounted() { },
  watch: {},

  methods: {
    ...mapActions(['Fullscreen', 'changeSetAndHistory', 'getSetAndHistory']),
    handleSelect() { },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    handleCommand(command) {
      this.$router.push(command.href)
      this.$store.commit('Tage', command.href)
      this.$store.commit('getvisited', command)
    },
  },
  computed: {
    ...mapState(['fullscreenFlag', 'setAndHistory', 'powerMenu']),
  },
}
</script>

<style lang="less" scoped>
.minwidth {
  .el-popover {
    min-width: 200px !important;
  }
}

.ActionItems-wapper {
  height: 100%;
  font-size: 16px;
  display: flex;
  justify-content: space-around;
  align-items: center;

  li {
    margin: 0 20px 0 0;
  }

  .actinitem {
    cursor: pointer;

    &:hover {
      color: #409eff;
    }
  }
}

.AllSearch .inline-input .el-input__inner {
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.inline-input {
  margin-top: -0.015625rem;
  display: table;
  width: 0px;
  transition: all 0.6s;
}

.el-dropdown {
  color: #fff;
}
</style>
